<template>
    <div class="courseContentManage">
      <audio ref="Frequency" controls="" style="display: none;"></audio>
      <MaskItem :imgPercentage="mediaPercentage"></MaskItem>
      <div class="crumbs" v-if="!showLesson">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-tickets"></i> {{courseCatalogTitle}} </el-breadcrumb-item>
          </el-breadcrumb>
      </div>

      <div class="container">
        <div class="handle-box">
          <el-button type="primary" @click.stop.prevent="operateAppend({}, 0)">新增阶段</el-button>
        </div>
        <div class="stageList" v-for="(item, index) in courseCatalogList" :key="index">
          <div class="stageListHeader">
            <div class="stageTitle">第 {{index+1}} 阶段</div>
            <div class="stageImg">
              <div class="crop-demo" @click.stop.prevent="operateCompile(item, index, 2)">
                <div class="cropImg" :style="{background: 'url(' + item.stage_cover + ')'}" v-if="item.stage_cover"></div>
                <!-- <img :src="item.stage_cover" v-if="item.stage_cover" width="60px" height="auto" style="cursor: pointer;"> -->
                <!-- <div class="crop-demo-btn">选择图片
                    <input class="crop-input" type="file" name="image" accept="image/*" @change="uploadCourseTypeImg($event, 1)"/>
                </div> -->
              </div>
            </div>
            <div class="stageButton">
              <el-button type="primary" @click.stop.prevent="operateAppend(item, 1)">新增课程内容</el-button>
              <!-- <el-button size="small" type="danger" @click.stop.prevent="operateDelete(item, 4)">删除阶段</el-button> -->
            </div>

          </div>

          <el-table :data="item.stage_list"   ref="multipleTable">
            <el-table-column label="课程序号" width="100" align="center">
              <template slot-scope="scope" >
                    {{item.stage_len + scope.$index+1}}
                </template>
            </el-table-column>
              <!-- sortable -->
              <el-table-column label="第几天" align="center">
                <template slot-scope="scope" >
                    {{scope.row.section_day}} 天
                </template>
              </el-table-column>
              <el-table-column label="课程名" align="center">
                <template slot-scope="scope" >
                  {{scope.row.section_name}}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                  <template slot-scope="scope" >
                    <!-- <el-button size="small" type="primary" @click.stop.prevent="operateAppend(scope.row, 1)">查看编辑</el-button> -->
                    <!-- <el-button size="small" type="danger" @click.stop.prevent="operateDelete(scope.row, scope.$index, 1)">删除</el-button> -->
                    <el-button size="small" type="info" plain @click.stop.prevent="operateSkipInterface(scope.row)">小讲堂</el-button>
                    <el-button size="small" type="primary" @click.stop.prevent="operateCompile(scope.row, scope.$index, 3)">查看编辑</el-button>
                    <el-button size="small" type="danger" @click.stop.prevent="operateDelete(scope.row, 5)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
        </div>

        <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="courseCatalogTotal">
            </el-pagination>
        </div>
      </div>


      <!-- 编辑弹出框 -->
      <el-dialog :title="editDialogTitle" :visible.sync="editVisible" width="60%" :close-on-click-modal="false">
        <!-- 新增/编辑阶段 -->
        <div class="editStage" v-if="courseOperateStatus === 0 || courseOperateStatus === 2">
          <div class="editStageTitle">第 {{courseStageIndex}} 阶段</div>
          <div class="editStageContent">
            <div class="crop-demo">
              <img :src="courseStageImg" class="pre-img" v-if="courseStageImg">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" ref="imageStage" accept="image/*" @change="uploadCourseImg($event, 0)"/>
              </div>
            </div>
          </div>
        </div>

        <!-- 课程内容编辑子窗体  -->
        <el-dialog :title="editSubDialogTitle" :visible.sync="editSubVisible"  width="50%" :modal-append-to-body="false" :close-on-click-modal="false" @before-close="editSubVisible=false">
          <!-- 课程 内容   0 - 文本   1 - 图片   2 - 音频   3 - 视屏  4 - 作业  5 - 游戏 -->
          <div class="subDialogCell" v-if="courseContentStatus === 0 || courseContentStatus === 4">
            <div style="width: 60%; margin-bottom: 30px;" v-if="courseContentStatus === 0">
              <el-input type="text" placeholder="请输入模块序号 从1开始"  v-model="courseContentModules.ordinal"></el-input>
              <span style="color: #ee3a29">  请输入模块序号 从1开始 </span>
            </div>
            <div style="width: 60%;" v-if="courseContentStatus === 0">
              <el-input type="text" placeholder="请输入标题"  v-model="courseContentModules.name"></el-input>
            </div>
            <div v-if="courseContentStatus === 4">作业</div>
            <div style="height: 20px;"></div>
            <div class="taskImage" v-if="courseContentStatus === 4">
              <em>
                点击上传图片
                <input class="uploadBtn" type="file" name="image" multiple ref="imageTask" accept="image/*" @change="uploadCourseImg($event, 4)"/>
              </em>
            </div>
            <!-- <div style="height: 20px;"></div> -->
            <div class="taskImageList" v-if="courseContentStatus === 4 && JSON.stringify(courseContentModules.image) !== '[]'">
              <draggable v-model="courseContentModules.image" :options="dragOptions">
                <transition-group tag="div" id="done" class="item-ul">
                  <div class="taskImageCell" v-for="(item, index) in courseContentModules.image" :key="'task_'+index" :style="{backgroundImage:`url(${item})`}">
                    <div class="cellButton" @click.stop.prevent="delectTaskImage(courseContentModules.image, index)">
                      <el-button type="danger" icon="el-icon-delete" circle></el-button>
                    </div>
                  </div>
                </transition-group>
              </draggable>
            </div>
            <div style="height: 20px;"></div>
            <el-input type="textarea" placeholder="请输入内容" :rows="8" v-model="courseContentModules.content"></el-input>
          </div>
          <div class="subDialogCell" v-if="courseContentStatus === 1">
            <div style="width: 60%; margin-bottom: 30px;">
              <el-input type="text" placeholder="请输入标题"  v-model="courseContentModules.name"></el-input>
            </div>
            <div class="uploadBox">
                <div class="uploadCell">
                  <div class="uplaodImage" v-if="courseContentModules.content">
                    <img :src="courseContentModules.content" width="100%">
                  </div>
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellImageText">
                    <em>
                      点击上传图片
                      <input class="uploadBtn" type="file" name="image" ref="imageSection" accept="image/*" @change="uploadCourseImg($event, 1)"/>
                    </em>
                  </div>
                </div>
              </div>
          </div>
          <div class="subDialogCell" v-if="courseContentStatus === 2">
            <div style="width: 60%; margin-bottom: 30px;">
              <el-input type="text" placeholder="请输入标题"  v-model="courseContentModules.name"></el-input>
            </div>
            <div class="uploadBox">
                <div class="uplaodAudio" v-if="courseContentModules.content" style="margin-bottom: 10px;">
                  <aplayer autoplay
                    :music="{
                      title: '悦器社',
                      artist: courseContentModules.name,
                      src: courseContentModules.content,
                      pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                  }"/>
                </div>
                <div class="uploadCell">
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellAudioText">
                    <em>
                      点击上传音频
                      <input class="uploadBtn" type="file" name="audio" ref="audioSection" accept="audio/*" @change="uploadCourseImg($event, 2)"/>
                    </em>
                  </div>
                </div>
              </div>
          </div>
          <div class="subDialogCell" v-if="courseContentStatus === 3">
            <div style="width: 60%; margin-bottom: 30px;">
              <el-input type="text" placeholder="请输入标题"  v-model="courseContentModules.name"></el-input>
            </div>
            <div class="uploadBox">
                <div class="uoloadVideo" v-if="courseContentModules.content"  style="margin-bottom: 10px;">
                  <!-- <div id="dplayer" style="max-width: 70%;margin: 0 auto">{{videoPlayer('dplayer', courseContentModules.content)}}</div> -->
                  <video :src="courseContentModules.content" width="100%" height="100%" controls></video>
                </div>
                <div class="uploadCell">
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellVideoText">
                    <em>
                      点击上传视屏
                      <input class="uploadBtn" type="file" name="video" ref="videoSection" accept="video/*" @change="uploadCourseImg($event, 3)"/>
                    </em>
                  </div>
                </div>
              </div>
          </div>
          <div class="subDialogCell" v-if="courseContentStatus === 5">
            <div style="width: 60%; margin-bottom: 30px;">
              <el-input type="text" placeholder="请输入模块序号 从1开始"  v-model="courseContentModules.ordinal"></el-input>
              <span style="color: #ee3a29">  请输入模块序号 从1开始 </span>
            </div>
            <el-row v-if="JSON.stringify(checkedLevel) !== '[]'">
              <div class="levelList">
                <draggable v-model="checkedLevel" :options="dragOptions">
                  <transition-group tag="div" id="done" class="item-ul">
                    <div class="levelcell" v-for="itemLevel in checkedLevel" :key="itemLevel.stripId">
                      {{itemLevel.title}}
                      <span v-if="itemLevel.follow !== '1' && itemLevel.stripType === 0" style="color: #ee3a29">（视频）</span> 
                      <span v-if="itemLevel.follow !== '1' && itemLevel.stripType === 3" style="color: #ee3a29">（教学视频）</span> 
                      <span v-if="itemLevel.follow === '1'" style="color: #ee3a29">（跟弹）</span> 
                      <span v-if="itemLevel.follow !== '1' && itemLevel.stripType === 1" style="color: #ee3a29">（乐曲）</span> 
                      <span v-if="itemLevel.follow !== '1' && itemLevel.stripType === 2" style="color: #ee3a29">（问答）</span> 
                    </div>
                    <!-- <div class="stripCell" v-for="(itemStrip, indexStrip) in item.cache" :key="itemStrip.stripId+'-'+indexStrip">{{itemStrip.title}}</div> -->
                  </transition-group>
                </draggable>
              </div>
            </el-row>

            <div style="margin: 15px 0;"></div>
            <el-row>
              <el-button plain @click.stop.prevent="optionGameScreeningType(0)">预备章</el-button>
              <el-button type="primary" plain @click.stop.prevent="optionGameScreeningType(1)">主线</el-button>
              <el-button type="success" plain @click.stop.prevent="optionGameScreeningType(2)">左手</el-button>
              <el-button type="info" plain @click.stop.prevent="optionGameScreeningType(3)">乐理</el-button>
              <el-button type="warning" plain @click.stop.prevent="optionGameScreeningType(4)">右手</el-button>
              <el-button type="danger" plain @click.stop.prevent="optionGameScreeningType(5)">预备库</el-button>
              <!-- <el-button type="danger" plain></el-button> -->
            </el-row>
            <div style="margin: 15px 0;"></div>
            <el-row v-if="JSON.stringify(gameLevelList) !== '[]'">
              <div class="chapterList" v-for="(item, index) in gameLevelList[gameLevelType]" :key="index">
                <div class="chapterTitle" @click.stop.prevent="collapseLevelChange(item)">{{item.chapterTitle}}</div>
                <div class="noteList" v-for="(itemNote, indexNote) in item.noteList" :key="indexNote" v-show="item.showed">
                    <div class="noteTitle" @click.stop.prevent="collapseLevelChange(itemNote)">{{itemNote.noteTitle}}</div>
                    <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange(itemNote)">全选</el-checkbox> -->
                    <div style="margin: 15px 0;"></div>
                    <!-- <div v-for="itemStrip in itemNote.noteStripList" :key="itemStrip.stripId" v-model="checkedLevel" @change="handleCheckedLevelChange(itemStrip)"> -->
                    <div class="stripList" v-for="itemStrip in itemNote.noteStripList" :key="itemStrip.stripId" @change="handleCheckedLevelChange(itemStrip)" v-show="itemNote.showed">
                      <el-checkbox :label="itemStrip" :checked="itemStrip.checked" :disabled="itemStrip.disabled">
                        {{itemStrip.title}}
                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 0" style="color: #ee3a29">（视频）</span> 
                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 3" style="color: #ee3a29">（教学视频）</span> 
                        <span v-if="itemStrip.follow === '1'" style="color: #ee3a29">（跟弹）</span> 
                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 1" style="color: #ee3a29">（乐曲）</span> 
                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 2" style="color: #ee3a29">（问答）</span> 
                      </el-checkbox>
                    </div>
                    <!-- </div> -->
                </div>
              </div>
              <!-- <div>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group v-for="item in gameLevelList" :key="item.stripId" v-model="checkedLevel" @change="handleCheckedLevelChange(item)">
                    <el-checkbox :label="item.stripId">{{item.title}} 《（{{item.chapterTitle}}）》</el-checkbox>
                  </el-checkbox-group>
              </div> -->
            </el-row>

          </div>

          <span slot="footer" class="dialog-footer">
              <el-button @click="editSubVisible = false">取 消</el-button>
              <el-button type="primary" @click.stop.prevent="operateMedia">确定</el-button>
          </span>
        </el-dialog>

        <!-- 新增/编辑小节 -->
        <div class="editSection" v-if="courseOperateStatus === 1 || courseOperateStatus === 3">
          <el-form ref="courseSectionFrom" :model="courseSectionFrom" :rules="courseSectionRules" label-width="25%">
            <div class="sectionLine">
              <el-form-item label="课程名称" prop="sectionName">
                  <el-input v-model="courseSectionFrom.sectionName"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="课程序号" prop="sectionNumber">
                  <el-input v-model.number="courseSectionFrom.sectionNumber"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="第几天" prop="sectionDay">
                  <el-input v-model.number="courseSectionFrom.sectionDay"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="今日目标" prop="sectionTarget">
                  <el-input type="textarea" v-model="courseSectionFrom.sectionTarget" placeholder="请输入今日目标" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="学习要点" prop="sectionKernel">
                  <el-input type="textarea" v-model="courseSectionFrom.sectionKernel" placeholder="请输入今日目标" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="是否布置作业">
                <el-radio v-model="courseSectionFrom.sectionJob" label="0">否</el-radio>
                <el-radio v-model="courseSectionFrom.sectionJob" label="1">是</el-radio>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="课程封面">
                <div v-if="courseSectionFrom.sectionCover">
                  <img class="showImage" :src="courseSectionFrom.sectionCover">
                </div>
                <div class="taskImage">
                  <em>
                    点击上传图片
                    <input class="uploadBtn" type="file" name="image" ref="imageCover" accept="image/*" @change="uploadCourseImg($event, 5)"/>
                  </em>
                </div>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="课程分享">
                <div v-if="courseSectionFrom.sectionShare">
                  <img class="showImage" :src="courseSectionFrom.sectionShare">
                </div>
                <div class="taskImage">
                  <em>
                    点击上传图片
                    <input class="uploadBtn" type="file" name="image" ref="imageShare" accept="image/*" @change="uploadCourseImg($event, 6)"/>
                  </em>
                </div>
              </el-form-item>
            </div>

            <div v-if="courseSectionFrom.sectionJob === '1'">
              <div class="sectionLine">
                <el-form-item label="作业曲谱" prop="sectionScore">
                  <div v-if="courseSectionFrom.sectionScore" style="margin-bottom: 10px">
                    <!-- <img class="showImage" :src="courseSectionFrom.sectionScore"> -->
                    <el-input v-model="courseSectionFrom.sectionScore" disabled></el-input>
                  </div>
                  <div class="taskImage">
                    <em>
                      上传XML曲谱
                      <input class="uploadBtn" type="file" name="image" ref="imageScore" accept="application/xml" @change="uploadCourseEncrypt($event, 7)"/>
                    </em>
                  </div>
                </el-form-item>
              </div>
              <div class="sectionLine">
                <el-form-item label="作业伴奏" prop="sectionAccompany">
                  <div v-if="courseSectionFrom.sectionAccompany" style="margin-bottom: 10px">
                    <!-- <img class="showImage" :src="courseSectionFrom.sectionScore"> -->
                    <!-- <el-input v-model="courseSectionFrom.sectionScore" disabled></el-input> -->
                    <!-- <aplayer autoplay
                        :music="{
                          title: '作业伴奏',
                          artist: '...',
                          src: courseSectionFrom.sectionAccompany,
                          pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                      }"/> -->
                      <audio controls src="" ref="accompanyAudio"></audio>
                  </div>
                  <div class="taskImage">
                    <em>
                      上传MP3伴奏
                      <input class="uploadBtn" type="file" name="audio" ref="audioScore" accept="audio/*" @change="uploadCourseEncrypt($event, 8)"/>
                    </em>
                  </div>
                </el-form-item>
              </div>
            </div>

            <draggable v-model="courseContentObject" :options="dragOptions">
              <transition-group tag="div" id="done" class="item-ul">

                <el-form-item v-for="(item, index) in courseContentObject" :key="'#'+index">
                  <div class="setionCharacter setionCell" v-if="item.status === 0 || item.status === 4">
                    <P v-if="item.ordinal && item.status === 0">属于 序号为<span style="font-size: 26px;" :style="{color: ((item.ordinal-0)%3 === 1)? 'red': ((item.ordinal-0)%3 === 2)? 'blue': 'green'}"> {{item.ordinal}} </span>的模块<span style="color: #ee3a29">  (模块序号)</span></P>
                    <P v-if="item.name">{{item.name}}<span style="color: #ee3a29">  (标题)</span></P>
                    <!-- <el-input type="textarea" placeholder="请输入课程内容" :rows="8"></el-input> -->
                    <!-- <p>{{item.content}}</p> -->
                    <div class="taskImageList" v-if="item.status === 4 && JSON.stringify(item.image) !== '[]'">
                      <div class="taskImageCell" v-for="(itemTask, indexTask) in item.image" :key="'task_'+indexTask" :style="{backgroundImage:`url(${itemTask})`}"></div>
                    </div>
                    <p v-for="(itemText, indexText) in item.cache" :key="indexText">{{itemText}}</p>
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileCourseContent(item, item.status)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteCourseContent(item, index, item.status)"></el-button>
                    </div>
                  </div>

                  <div class="setionImage setionCell" v-if="item.status === 1">
                    <p style="margin-bottom: 20px;">{{item.name}}</p>
                    <img :src="item.content">
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileCourseContent(item, 1)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteCourseContent(item, index, 1)"></el-button>
                    </div>
                  </div>

                  <div class="setionAudio setionCell" v-if="item.status === 2">
                    <aplayer autoplay
                      :music="{
                        title: '悦器社~',
                        artist: item.name,
                        src: item.content,
                        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                    }"/>
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileCourseContent(item, 2)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteCourseContent(item, index, 2)"></el-button>
                    </div>
                  </div>

                  <div class="setionVideo setionCell" v-if="item.status === 3">
                    <p style="margin-bottom: 20px;">{{item.name}}</p>
                    <!-- <div :id="'dplayer'+index" style="max-width: 70%;margin: 0 auto">{{videoPlayer('dplayer'+index, item.content)}}</div> -->
                    <video :src="item.content" width="100%" height="100%" controls></video>
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileCourseContent(item, 3)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteCourseContent(item, index, 3)"></el-button>
                    </div>
                  </div>

                  <div class="setionGame setionCell" v-if="item.status === 5">
                    <P v-if="item.ordinal">属于 序号为<span style="font-size: 26px;" :style="{color: ((item.ordinal-0)%3 === 1)? 'red': ((item.ordinal-0)%3 === 2)? 'blue': 'green'}"> {{item.ordinal}} </span>的模块<span style="color: #ee3a29">  (模块序号)</span></P>
                    <!-- <draggable v-model="item.cache" :options="dragOptions">
                      <transition-group tag="div" id="done" class="item-ul"> -->
                        <div class="stripCell" v-for="(itemStrip, indexStrip) in item.cache" :key="itemStrip.stripId+'-'+indexStrip">
                          {{itemStrip.title}}
                          <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 0" style="color: #ee3a29">（视频）</span> 
                          <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 3" style="color: #ee3a29">（教学视频）</span> 
                          <span v-if="itemStrip.follow === '1'" style="color: #ee3a29">（跟弹）</span> 
                          <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 1" style="color: #ee3a29">（乐曲）</span> 
                          <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 2" style="color: #ee3a29">（问答）</span> 
                        </div>
                      <!-- </transition-group>
                    </draggable> -->
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileCourseContent(item, 5)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteCourseContent(item, index, 5)"></el-button>
                    </div>
                  </div>

                </el-form-item>
              </transition-group>
            </draggable>
          </el-form>

          <div class="setionButton">
            <div class="setionBtn" @click.stop.prevent="appendCourseContent(0)">
              <el-button type="primary">文字</el-button>
            </div>
            <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(1)">
              <el-button>图片</el-button>
            </div> -->
            <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(2)">
              <el-button type="info">音频</el-button>
            </div> -->
            <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(3)">
              <el-button type="warning">视频</el-button>
            </div> -->
            <div class="setionBtn" @click.stop.prevent="appendCourseContent(4)">
              <el-button type="success">作业</el-button>
            </div>
            <div class="setionBtn" @click.stop.prevent="appendCourseContent(5)">
              <el-button type="danger">游戏</el-button>
            </div>
          </div>
        </div>

        <!-- <el-form ref="form" :model="courseSectionFrom" label-width="20%">
          <el-form-item label="课程类型名称">
              <el-input ></el-input>
          </el-form-item>
          <el-form-item label="总计天数">
              <el-input></el-input>
          </el-form-item>
          <el-form-item label="课程banner上传">
            <div class="crop-demo">
              <img :src="courseTypeBanner" class="pre-img" v-if="courseTypeBanner">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" accept="image/*" @change="uploadCourseTypeImg($event, 0)"/>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="证书上传">
            <div class="crop-demo">
              <img :src="courseTypeCertificate" class="pre-img" v-if="courseTypeCertificate">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" accept="image/*" @change="uploadCourseTypeImg($event, 1)"/>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="课程介绍图片上传">
            <div class="crop-demo">
              <img :src="courseTypeReferral" class="pre-img" v-if="courseTypeReferral">
              <div class="crop-demo-btn">选择图片
                  <input class="crop-input" type="file" name="image" accept="image/*" @change="uploadCourseTypeImg($event, 2)"/>
              </div>
            </div>
          </el-form-item>
        </el-form> -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="operateForm('courseSectionFrom')">保存发布</el-button>
        </span>
      </el-dialog>


      <!-- 删除提示框 -->
      <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
        <div class="del-dialog-cnt" v-if="courseOperateStatus == 4 || courseOperateStatus == 5">
          删除不可恢复，请输入登录密码确定删除
          <!-- <el-input ></el-input> -->
          <el-form ref="courseSectionFrom" :model="courseSectionFrom" :rules="courseSectionRules">
            <el-form-item label="" prop="userPassword">
              <el-input v-model="courseSectionFrom.userPassword" placeholder="请输入用户密码"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="del-dialog-cnt" v-else>
          确定删除？？？
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="deleteForm('courseSectionFrom')">确 定</el-button>
        </span>
      </el-dialog>

      <div class="courseLseeon" v-if="showLesson">
        <Lesson :section_id="sectionId" @commentLesson="commentLesson"></Lesson>
      </div>

    </div>
</template>

<script type="text/ecmascript-6">
  import {baiduCloud} from '@/config/env';
  import { upLoadFileToOSS } from '@/config/utils'
  import { fileUploadAes } from '@/config/aes'
  import {
    obtainCourseCatalogList,
    appendCourseStage,
    compileCourseStage,
    appendCourseSection,
    compileCourseSection,
    deleteCourseSection,
    obtainGameScreeningList
  } from '@/config/api'
  import Vue from 'vue'
  import aesjs from 'aes-js'
  import axios from 'axios'
  // 视频插件
  // import 'DPlayer/dist/DPlayer.min.css'
  // import DPlayer from 'DPlayer'
  // 音频插件
  import Aplayer from 'vue-aplayer'
  // 拖拽
  import draggable from 'vuedraggable'
  // 加载动画
  import Mask from '@/components/common/mask.vue'
  // 小讲堂
  import Lesson from '@/components/page/CourseManage/CourseLessonManage/CourseLessonManage'
  export default {
    name: 'CourseContentManage',
    components: {
        Aplayer,
        draggable,
        MaskItem: Mask,
        Lesson
    },
    data () {
      return {
        aes_key: [0xD3, 0xC0, 0xDE, 0x01, 0xDD, 0xC6, 0xF6, 0xC9, 0x56, 0x0E, 0x7D, 0xD3, 0xC0, 0xDE, 0x01, 0xDD],
		iv: [0xC6, 0xF6, 0xC9, 0x56, 0x0E, 0xD3, 0xC0, 0xDE, 0x01, 0xDD, 0x57, 0xC6, 0xF6, 0xC9, 0x56, 0x0E],
        //
        akBos: baiduCloud.akBos,
        skBos: baiduCloud.skBos,
        endpointBos: baiduCloud.endpointBos,

        // 0 --- 课程阶段图片
        // bucketImgBos: baiduCloud.bucketBos +'/course/image',
        // urlImgBos: baiduCloud.urlBos+'/course/image/',
        bucketStageImageBos: baiduCloud.bucketBos +'/course/stage/image',
        urlStageImageBos: baiduCloud.urlBos+'/course/stage/image/',

        // 1 --- 课程内容图片
        bucketSetionImageBos: baiduCloud.bucketBos +'/course/setion/image',
        urlSetionImageBos: baiduCloud.urlBos+'/course/setion/image/',

        // 2 --- 课程内容音频
        bucketSetionAudioBos: baiduCloud.bucketBos +'/course/setion/audio',
        urlSetionAudioBos: baiduCloud.urlBos+'/course/setion/audio/',

        // 3 --- 课程内容视屏
        bucketSetionVideoBos: baiduCloud.bucketBos +'/course/setion/video',
        urlSetionVideoBos: baiduCloud.urlBos+'/course/setion/video/',

        // 4 --- 作业曲谱
        bucketSetionScoreBos: baiduCloud.bucketBos +'/course/setion/score',
        urlSetionScoreBos: baiduCloud.urlBos+'/course/setion/score/',

        // 5 --- 作业伴奏
        bucketSetionAccompanyBos: baiduCloud.bucketBos +'/course/setion/accompany',
        urlSetionAccompanyBos: baiduCloud.urlBos+'/course/setion/accompany/',

        // 多媒体 上传进度
        mediaPercentage: 0,

        // 拖拽配置
        dragOptions:{
            animation: 120,
            scroll: true,
            group: 'sortlist',
            ghostClass: 'ghost-style'
        },

        // // 存储课程类型数据
        // courseTypeList: [
        //   {},{},{}
        // ],

        // 存储课程目录(阶段+小节)数据
        courseCatalogData: [],
        // 存储课程目录数据
        courseCatalogList: [],
        // 课程目录标题
        courseCatalogTitle: '',
        // 课程目录总条数
        courseCatalogTotal: 0,
        // 课程目录页面
        courseCatalogPage: 0,

        // // 课程类型下标
        // courseTypeIndex: -1,


        // 课程内容表单
        courseSectionFrom: {
          sectionName: '',
          sectionNumber: null,
          sectionDay: null,
          sectionTarget: '', 
          sectionKernel: '',
          sectionJob: '0',
          sectionCover: '',
          sectionShare: '',
          sectionAccompany: '',
          sectionScore: '',
          userPassword: '',
        },
        courseSectionRules: {
          sectionName: [
              { required: true, message: '请输入课程名称', trigger: 'blur' },
          ],
          sectionNumber: [
              { required: true, message: '请填写课程序号', trigger: 'blur' },
              { type: 'number', message: '课程序号必须为数字'}
          ],
          sectionDay: [
              { required: true, message: '请填写第几天', trigger: 'blur' },
              { type: 'number', message: '第几天必须为数字'}
          ],
          sectionTarget: [
              { required: true, message: '请输入今日目标', trigger: 'blur' },
          ],
          sectionKernel: [
              { required: true, message: '请输入学习要点', trigger: 'blur' },
          ],
          sectionAccompany: [
              { required: true, message: '请上传作业伴奏', trigger: 'blur' },
          ],
          sectionScore: [
              { required: true, message: '请上传作业曲谱', trigger: 'blur' },
          ],
          userPassword: [
              { required: true, message: '请输入用户密码', trigger: 'blur' },
          ],
        },
        // 显示编辑弹窗
        editVisible: false,
        // 编辑弹窗标题
        editDialogTitle: '',
        // 显示编辑子弹窗
        editSubVisible: false,
        // 编辑子弹窗标题
        editSubDialogTitle: '',

        // 显示删除弹窗
        delVisible: false,
        // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片   6 --- 课程分享图片   7 --- 作业xml曲谱  8 --- 作业伴奏
        courseStatus: 0,
        // 课程阶段图片
        courseStageImg: '',
        // 课程阶段下标
        courseStageIndex: null,

        // // 课程封面图片
        // courseCoverImg: '',

        // // 课程新增对象
        // courseAppendObject: {},
        // // 课程新增状态 0 --- 新增阶段   1  --- 新增小节
        // courseAppendStatus: 0,
        // // 课程删除状态 0 --- 删除阶段   1  --- 删除小节
        // courseDeleteStatus: 0,



        // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
        courseOperateStatus: 0,
        // 课程操作对象
        courseOperateObject: {},


        // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
        courseContentStatus: 0,
        // 课程内容对象
        courseContentObject: [],
        // 课程内容下标
        courseContentIndex: null,

        // 存储欲编辑课程内容模块
        courseContentModules: {},
        // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
        courseContentModulesStatus: 0,

        // 课程类型id
        typeId: '',
        // 课程阶段id
        stageId: '',

        // // 视屏播放器对象
        // dp: '',


        // 游戏关卡数据 列表
        gameLevelList: [],
        // 游戏关卡类型  0 -- 预备章  1 -- 主线  2 -- 左手  3 -- 乐理  4 -- 右手
        gameLevelType: 0,

        // checkAll: false,
        // isIndeterminate: true,

        // 储存 选中的关卡
        checkedLevel: [],
        // 作业 图片列表
        taskImageList: [],

        // 显示小讲堂
        showLesson: false,
        // 课程小节id
        sectionId: ''

        // activeNames: ['13', '23']
      }
    },
    watch: {
      // 深度监听
      $route: {
          handler(item){
              let self = this;
              if(JSON.stringify(item.query) != '[]') {
                // console.log(item.query.typeId, '...深度监听...typeId')
                // 课程类型id
                self.typeId = item.query.typeId;
                // // 课程阶段id
                // self.stageId = item.query.typeId+ '002';
                // 获取课程目录数据
                self.obtainCourseCatalogData()
              }
          },
          deep:true
      },
      editVisible: {
        handler(value) {
          let self = this;
          if (!value) {
            if (self.$refs.accompanyAudio) {
              self.$refs.accompanyAudio.pause()
            }
            console.log(self.$refs.accompanyAudio, '...self.$refs.accompanyAudio')
          }
        },
        deep: true
      }
    },
    async mounted (){
      let self = this;
      // // 初始化百度云上传
      // self.initBaiDuBce();
      // console.log(self.$route.query, '......mounted')
      if(JSON.stringify(self.$route.query) != '[]') {
        // console.log(self.$route.query.typeId, '...typeId')
        // 课程类型id
        self.typeId = self.$route.query.typeId;
        // // 课程阶段id
        // self.stageId = self.$route.query.typeId+ '002';
        // 获取课程目录数据
        self.obtainCourseCatalogData()

        // // 获取游戏关卡列表数据
        // await self.obtainGameScreeningData()
        // // 初始化游戏关卡列表数据
        // self.initGameScreeningData()
      }
    },
    methods: {
      videoPlayer(obj, url) {
          // this.$nextTick(() => {
          //     const dp = new DPlayer({
          //         container: document.getElementById(obj),
          //         video: {
          //             url: url
          //         }
          //     });
          // })

      },


      // 分页导航
      handleCurrentChange(val) {
        let self = this;
        // 课程目录页面
        self.courseCatalogPage = val - 1;
        // 获取课程目录数据
        self.obtainCourseCatalogData();
        console.log(val, '分页导航')
      },

      // // 操作 添加类型
      // operateAppendType(){
      //   let self = this;
      //   // 编辑弹窗标题
      //   self.editDialogTitle = '新增课程类型';
      //   // 显示编辑弹窗
      //   self.editVisible = true;
      // },
      // // 操作 编辑类型
      // operateCompileType(item){
      //   let self = this;
      //   // 编辑弹窗标题
      //   self.editDialogTitle = '编辑课程类型';
      //   // 显示编辑弹窗
      //   self.editVisible = true;
      // },
      // // 操作 删除类型
      // operateDeleteType(index, row){
      //   let self = this;
      //   // 课程类型下标
      //   self.courseTypeIndex = index;
      //   console.log(index, row, '...删除类型')
      //   // 显示删除弹窗
      //   self.delVisible = true;
      // },

      // 操作初始化
      operateInit(){
        let self = this;
        // 课程操作对象
        self.courseOperateObject = {};
        // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
        self.courseOperateStatus = 0;
        // 新增阶段
        self.courseStageImg = '';
        // 课程阶段下标
        self.courseStageIndex = null;
        // // 课程封面图片
        // self.courseCoverImg = '';
        // 课程内容表单
        self.courseSectionFrom.sectionName = '';
        self.courseSectionFrom.sectionNumber = null;
        self.courseSectionFrom.sectionDay = null;
        self.courseSectionFrom.sectionTarget = '';
        self.courseSectionFrom.sectionKernel = '';
        self.courseSectionFrom.sectionJob = '0';
        self.courseSectionFrom.userPassword = '';
        self.courseSectionFrom.sectionCover = '';
        self.courseSectionFrom.sectionShare = '';
        self.courseSectionFrom.sectionAccompany = '';
        self.courseSectionFrom.sectionScore = '';

        // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
        self.courseContentStatus = 0;
        // 课程内容对象
        self.courseContentObject = [];
        // 课程内容下标
        self.courseContentIndex = null;
      },

      //  操作 添加
      operateAppend(item, status){
        let self = this;
        // // 课程状态 0 --- 阶段   1  --- 小节
        // self.courseAppendStatus = status;
        // // 课程新增对象
        // self.courseAppendObject = item;
        // if(self.courseAppendStatus === 0){
        //   if(item){
        //     // 编辑弹窗标题
        //     self.editDialogTitle = '编辑课程阶段';
        //   }else{
        //     // 编辑弹窗标题
        //     self.editDialogTitle = '新增课程阶段';
        //   }
        // }
        // if(self.courseAppendStatus === 1){
        //   if(item){
        //     // 编辑弹窗标题
        //     self.editDialogTitle = '编辑课程内容';
        //   }else{
        //     // 编辑弹窗标题
        //     self.editDialogTitle = '新增课程内容';
        //   }
        // }

        // 操作初始化
        self.operateInit();
        // 课程操作对象
        self.courseOperateObject = item;
        // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
        self.courseOperateStatus = status;
        if(self.courseOperateStatus === 0){
          // 编辑弹窗标题
          self.editDialogTitle = '新增课程阶段';
          // 课程阶段下标
          self.courseStageIndex = self.courseCatalogList.length? self.courseCatalogList.length+1: 1
        }
        if(self.courseOperateStatus === 1){
          // 编辑弹窗标题
          self.editDialogTitle = '新增课程内容';
          // 课程阶段id
          self.stageId = item.stage_id;
        }

        // 显示编辑弹窗
        self.editVisible = true;
      },

      // // 操作 封面
      // operateCover() {
      //   let self = this;
      //   // 操作初始化
      //   self.operateInit();
      // },

      // 操作 跳转页面 
      operateSkipInterface(item) {
        console.log(item, '操作 跳转页面')
        let self = this;
        // self.$router.push({path: '/courseLessonManage', query: {sectionId: item.section_id}})
        // 课程小节id
        self.sectionId = item.section_id
        // 显示小讲堂
        self.showLesson = true

      },

      // 操作 编辑
      operateCompile(item, index, status){
        let self = this;
        // 操作初始化
        self.operateInit();
        // 课程操作对象
        self.courseOperateObject = item;
        console.log(self.courseOperateObject, '......courseOperateObject')
        // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
        self.courseOperateStatus = status;
        if(self.courseOperateStatus === 2){
          // 编辑弹窗标题
          self.editDialogTitle = '编辑课程阶段';
          // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片   6 --- 课程分享图片   7 --- 作业xml曲谱  8 --- 作业伴奏
          self.courseStatus = 0;
          // 课程阶段图片
          self.courseStageImg = self.courseOperateObject.stage_cover;
          // 课程阶段下标
          self.courseStageIndex = index+1;
        }
        if(self.courseOperateStatus === 3){
          // 编辑弹窗标题
          self.editDialogTitle = '编辑课程内容';
          // 课程内容表单
          self.courseSectionFrom.sectionName =  self.courseOperateObject.section_name;
          self.courseSectionFrom.sectionNumber =  self.courseOperateObject.section_number-0;
          self.courseSectionFrom.sectionDay =  self.courseOperateObject.section_day-0;
          self.courseSectionFrom.sectionTarget = self.courseOperateObject.section_target ;
          self.courseSectionFrom.sectionKernel = self.courseOperateObject.section_kernel;
          self.courseSectionFrom.sectionJob =  self.courseOperateObject.section_job+'';
          self.courseSectionFrom.sectionCover = self.courseOperateObject.section_cover;
          self.courseSectionFrom.sectionShare = self.courseOperateObject.section_share;
          self.courseSectionFrom.sectionAccompany = self.courseOperateObject.section_accompany;
          self.courseSectionFrom.sectionScore = self.courseOperateObject.section_score;
          
          // 课程内容对象
          self.courseContentObject = JSON.parse(self.courseOperateObject.section_content);

          if (self.courseSectionFrom.sectionAccompany) {
            // 解密云端上的多媒体文件数据
            self.decodeCloudsMultimedia(self.courseSectionFrom.sectionAccompany)
          }

        }

        // 显示编辑弹窗
        self.editVisible = true;
      },

      // 操作 删除
      operateDelete(item, status){
        let self = this;
        // // 课程删除状态 0 --- 删除阶段   1  --- 删除小节
        // self.courseDeleteStatus = status;
        // if(self.courseDeleteStatus === 0){}
        // if(self.courseDeleteStatus === 1){}
        // 操作初始化
        self.operateInit();
        // 课程操作对象
        self.courseOperateObject = item;
        // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
        self.courseOperateStatus = status;
        if(self.courseOperateStatus === 4){

        }
        if(self.courseOperateStatus === 5){

        }

        // 显示删除弹窗
        self.delVisible = true;
      },

      // 新增课程内容
      async appendCourseContent(status){
        let self = this;
        // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
        self.courseContentModulesStatus = 0;
        // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
        self.courseContentStatus = status;
        // 存储欲编辑课程内容模块
        self.courseContentModules = {
          status: self.courseContentStatus,
          ordinal: '1',
          content: '',
          cache: [],
          image: [],
          name: '',
          play: 0,
          duration: 0
        };
        if(self.courseContentStatus === 0){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '新增课程文本'
        }
        if(self.courseContentStatus === 1){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '新增课程图片'
        }
        if(self.courseContentStatus === 2){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '新增课程音频'
        }
        if(self.courseContentStatus === 3){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '新增课程视屏'
        }
        if(self.courseContentStatus === 4){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '新增课程作业'
          // 存储欲编辑课程内容模块
          self.courseContentModules.name = '作业'
        }
        if(self.courseContentStatus === 5){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '新增课程游戏'
          // 存储欲编辑课程内容模块
          // self.courseContentModules.name = '游戏'

          self.checkedLevel = []
          self.gameLevelList = []

          // 获取游戏关卡列表数据
          await self.obtainGameScreeningData()

          // 初始化游戏关卡列表数据
          self.initGameScreeningData()

          // 筛选可选择的游戏关卡列表数据
          self.filtrateGameScreeningData()

        }


        // 显示编辑子弹窗
        self.editSubVisible = true;

      },
      // 编辑课程内容
      async compileCourseContent(item, status){
        let self = this;
        // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
        self.courseContentModulesStatus = 1;
        // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
        self.courseContentStatus = status;
        // 存储欲编辑课程内容模块
        self.courseContentModules = item;
        if(self.courseContentStatus === 0){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '编辑课程文本'
          // item.cache = item.content.join('\n')

          // item.content = contentToString
          console.log(item, '.....编辑课程内容')
        }
        if(self.courseContentStatus === 1){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '编辑课程图片'
        }
        if(self.courseContentStatus === 2){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '编辑课程音频'
        }
        if(self.courseContentStatus === 3){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '编辑课程视屏'
        }
        if(self.courseContentStatus === 4){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '编辑课程作业'
        }
        if(self.courseContentStatus === 5){
          // 编辑子弹窗标题
          self.editSubDialogTitle = '编辑课程游戏'

          self.gameLevelList = []

          // 获取游戏关卡列表数据
          await self.obtainGameScreeningData()

          // 初始化游戏关卡列表数据
          await self.initGameScreeningData()

          // 储存 选中的关卡
          self.checkedLevel = item.cache

          // 课程内容对象
          console.log(self.courseContentObject, '课程内容对象')

          // 筛选可选择的游戏关卡列表数据
          self.filtrateGameScreeningData()

          console.log(self.courseContentModules, '编辑课程游戏')
        }

        // 显示编辑子弹窗
        self.editSubVisible = true;
      },
      // 拖拽课程内容
      // 删除课程内容
      deleteCourseContent(item, index, status){
        let self = this;
        // 课程内容下标
        self.courseContentIndex = index;
        // console.log(item, index, status, '.......删除课程内容')
        // 显示删除弹窗
        self.delVisible = true;
      },
      // 删除作业图片
      delectTaskImage(item, index) {
        let self = this;
        item.splice(index, 1);
      },



    // // 初始化百度云上传
    // initBaiDuBce(){
    //   let self = this;
    //   let bosConfig = {
    //     credentials: {
    //         ak: self.akBos,
    //         sk: self.skBos
    //     },
    //     endpoint: self.endpointBos  // 根据您选用bos服务的区域配置相应的endpoint
    //   };
    //   // let bucket = self.bucketBos; // 设置您想要操作的bucket
    //   self.client = new baidubce.sdk.BosClient(bosConfig);
    // },
    //   // 上传多媒体
    //   uploadCourseMultimedia(file, index) {
    //     console.log(file, index, '上传多媒体')
    //     let self = this;
    //     // 用户取消上传
    //     if(file == undefined){
    //       return;
    //     }
    //     // 生成6位随机数
    //     let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
    //     let res = "";
    //     for(let i = 0; i < 6 ; i ++) {
    //       let id = Math.ceil(Math.random()*61);
    //       res += chars[id];
    //     }
    //     let key = res + '.' +file.name.split(/\./g).pop(); // 保存到bos时的key，您可更改，默认以文件名作为key
    //     let blob = file;
    //     let ext = key.split(/\./g).pop();
    //     let mimeType = baidubce.sdk.MimeType.guess(ext);
    //     if (/^text\//.test(mimeType)) {
    //       mimeType += '; charset=UTF-8';
    //     }
    //     let options = {
    //       'Content-Type': mimeType
    //     };
    //     // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片   6 --- 课程分享图片   7 --- 作业xml曲谱  8 --- 作业伴奏
    //     let bucketBos = '';
    //     let urlBos = '';
    //     let frequencyDuration = null;
    //     if(self.courseStatus === 0){
    //       bucketBos = self.bucketStageImageBos;
    //       urlBos = self.urlStageImageBos;
    //     }
    //     if(self.courseStatus === 1 || self.courseStatus === 4 || self.courseStatus === 5 || self.courseStatus === 6){
    //       bucketBos = self.bucketSetionImageBos;
    //       urlBos = self.urlSetionImageBos;
    //     }
    //     if(self.courseStatus === 2){
    //       bucketBos = self.bucketSetionAudioBos;
    //       urlBos = self.urlSetionAudioBos;
    //     }
    //     if(self.courseStatus === 3){
    //       bucketBos = self.bucketSetionVideoBos;
    //       urlBos = self.urlSetionVideoBos;
    //     }
    //     self.client.putObjectFromBlob(bucketBos, key, blob, options)
    //       .then(async (res) => {
    //         // 上传完成，添加您的代码
    //         console.log(key,res,file,index,'上传成功');
    //         // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片   6 --- 课程分享图片   7 --- 作业xml曲谱  8 --- 作业伴奏
    //         if(self.courseStatus === 0 || self.courseStatus === 5 || self.courseStatus === 6){
    //           if(self.courseStatus === 0){
    //             // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
    //             self.$refs.imageStage.value = ''
    //             // 课程类型banner
    //             self.courseStageImg = urlBos + key;
    //           }
    //           if(self.courseStatus === 5){
    //             // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
    //             self.$refs.imageCover.value = ''
    //             // 课程类型封面
    //            self.courseSectionFrom.sectionCover = urlBos + key;
    //             // self.courseStageImg = urlBos + key;
    //           }
    //           if(self.courseStatus === 6){
    //             // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
    //             self.$refs.imageShare.value = ''
    //             // 课程类型封面
    //             self.courseSectionFrom.sectionShare = urlBos + key;
    //           }
              
    //         }else{
    //           console.log(file, index,'....file')
    //           // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
    //           if (self.courseStatus === 1) {
    //             self.$refs.imageSection.value = ''
    //           }
    //           if (self.courseStatus === 2) {
    //             self.$refs.audioSection.value = ''
    //             frequencyDuration = null
    //             frequencyDuration = await self.obtainFrequencyDuration((urlBos + key))
    //             self.courseContentModules.duration = Math.floor(frequencyDuration);
    //           }
    //           if (self.courseStatus === 3) {
    //             self.$refs.videoSection.value = ''
    //           }

    //           if (self.courseStatus !== 4) {
    //             // self.courseContentModules.name = file.name.split(/\./g).shift();
    //             self.courseContentModules.content = urlBos + key;
    //             self.courseContentModules.play = 0;
    //           } else {
    //             self.$refs.imageTask.value = ''
    //             console.log('课程作业图片', urlBos + key)
    //             self.courseContentModules.image.push(urlBos + key)

    //           }
              

    //           console.log(self.courseContentModules, '...............')
    //         }
    //       })
    //       .catch(function (err) {
    //           // 上传失败，添加您的代码
    //           console.log(err);
    //     });
    //     self.client.on('progress', function (evt){
    //         // console.log(evt, ".....")
    //         // 监听上传进度
    //         if (evt.lengthComputable){
    //             self.mediaPercentage = parseInt((evt.loaded / evt.total) * 100)+'';
    //             console.log(self.mediaPercentage, "上传")
    //             self.mediaPercentage = String(self.mediaPercentage)
    //             // 满了，清空进度条
    //             if(self.mediaPercentage == 100){
    //                 self.mediaPercentage = 0
    //             }
    //         }
    //     });
    //   },

    // 加密多媒体文件数据并上传
    uploadEncryptMultimedia(file, index) {
        let self = this;
        // 用户取消上传
        if(file == undefined){
            return;
        }
        // 生成6位随机数
        let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
        let res = "";
        for(let i = 0; i < 6 ; i ++) {
            let id = Math.ceil(Math.random()*61);
            res += chars[id];
        }
        let key = res + '.' +file.name.split(/\./g).pop(); // 保存到bos时的key，您可更改，默认以文件名作为key
        let blob = file;
        let ext = key.split(/\./g).pop();
        let mimeType = baidubce.sdk.MimeType.guess(ext);
        if (/^text\//.test(mimeType)) {
            mimeType += '; charset=UTF-8';
        }
        let options = {
            'Content-Length': 0, // 添加http header
			'Content-Type': 'application/octet-stream;charset=utf-8', // 添加http header
			'Content-Encoding': 'binary'
        };
        // 多媒体文件加载后才可以加密
        self.multimediaFileReader(file, (data)=>{
            let fileBuffer = Buffer(data);
            console.log(fileBuffer, '多媒体文件加载')
            let aesCbc = new aesjs.ModeOfOperation.cbc(self.aes_key, self.iv);
            // 对buffer加密
			let encryptedBytes = aesCbc.encrypt(aesjs.padding.pkcs7.pad(fileBuffer));
			console.log(Buffer(encryptedBytes))
            // buffer形式上传
            options['Content-Length'] = encryptedBytes.byteLength
            // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片   6 --- 课程分享图片   7 --- 作业xml曲谱  8 --- 作业伴奏
            let bucketBos = ''
            let urlBos = ''
            if (self.courseStatus === 7) {
                bucketBos = self.bucketSetionScoreBos;
                urlBos = self.urlSetionScoreBos;
            }
            if (self.courseStatus === 8) {
                bucketBos = self.bucketSetionAccompanyBos;
                urlBos = self.urlSetionAccompanyBos;
            }
            // 加 'x' 表示加密
            self.client.putObjectFromBlob(bucketBos, key+'x', Buffer(encryptedBytes), options)
                .then(async (res) => {
                    console.log(urlBos + key+'x', '...urlBos + key')
                    if (self.courseStatus === 7) {
                        // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                        self.$refs.imageScore.value = ''
                        // 作业 xml曲谱
                        self.courseSectionFrom.sectionScore = urlBos + key + 'x';
                    }
                    if (self.courseStatus === 8) {
                        // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                        self.$refs.audioScore.value = ''
                        // 作业 伴奏
                        self.courseSectionFrom.sectionAccompany = urlBos + key + 'x';
                        // 解密云端上的多媒体文件数据
                        self.decodeCloudsMultimedia(self.courseSectionFrom.sectionAccompany)
                    }
                })
                .catch(function (err) {
                    // 上传失败，添加您的代码
                    console.log(err);
            });

            self.client.on('progress', function (evt){
                // console.log(evt, ".....")
                // 监听上传进度
                if (evt.lengthComputable){
                    self.mediaPercentage = parseInt((evt.loaded / evt.total) * 100)+'';
                    console.log(self.mediaPercentage, "上传")
                    self.mediaPercentage = String(self.mediaPercentage)
                    // 满了，清空进度条
                    if(self.mediaPercentage == 100){
                        self.mediaPercentage = 0
                    }
                }
            });
        })
    },
    // 解密云端上的多媒体文件数据
    decodeCloudsMultimedia(_url) {
        let self = this;
        self.$nextTick(() => {
			axios({
				method: 'get',
				// data: buffer, http://mb-bucket.cdn.bcebos.com/NF4s2V.m4a http://mb-bucket.cdn.bcebos.com/vLmR7ErCuWRj.mp3x http://mb-bucket.gz.bcebos.com/mYU7iglfckMc.m4ax
				url: _url,
                headers: {
                    'Content-Type': 'application/octet-stream;charset=utf-8'
                },
                responseType: 'arraybuffer' // 接收二进制
			})
			.then(response => {
                // var audio = document.getElementById('audio_play_'+index)
                // console.log(audio)
                // 解密后得到base64
                let b64 = self.decrypted(response.data)
                self.$refs.accompanyAudio.src = b64;
                self.$refs.accompanyAudio.load()
                console.log(b64, '...b64')
				// audio.src = b64;
				// audio.load();	// 得到播放源之后，重新加载		
			})
			.catch(err => {
                // 未加密的音频
                // var audio = document.getElementById('audio_play_'+index)
                // audio.src = src;
                // audio.load();	// 得到播放源之后，重新加载
              // console.error(err);
              self.$refs.accompanyAudio.src = _url;
              self.$refs.accompanyAudio.load()
			})
		})
    },
    // 解密音频文件
	decrypted(data) {
        let aesCbc = new aesjs.ModeOfOperation.cbc(this.aes_key, this.iv); // 解密的配置
        let decryptedBytes = aesCbc.decrypt(aesjs.padding.pkcs7.pad(Buffer(data))); // 得到外链的二进制后，进行解密
        // 解密后的buffer 二进制转base 
        return this._arrayBufferToBase64(Buffer(decryptedBytes))
    },
    // 二进制转base64
	_arrayBufferToBase64(raw) {
        let base64 = '';
        let encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
        let bytes = new Uint8Array(raw);
        let byteLength = bytes.byteLength;
        let byteRemainder = byteLength % 3;
        let mainLength = byteLength - byteRemainder;
        let a, b, c, d;
        let chunk;
        // Main loop deals with bytes in chunks of 3
        for(let i = 0; i < mainLength; i = i + 3) {
            // Combine the three bytes into a single integer
            chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
            // Use bitmasks to extract 6-bit segments from the triplet
            a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
            b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
            c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
            d = chunk & 63; // 63 = 2^6 - 1
            // Convert the raw binary segments to the appropriate ASCII encoding
            base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
        }
        // Deal with the remaining bytes and padding
        if(byteRemainder == 1) {
            chunk = bytes[mainLength];
            a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2;
            // Set the 4 least significant bits to zero
            b = (chunk & 3) << 4 // 3 = 2^2 - 1;
            base64 += encodings[a] + encodings[b] + '==';
        } else if(byteRemainder == 2) {
            chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
            a = (chunk & 16128) >> 8 // 16128 = (2^6 - 1) << 8;
            b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4;
            // Set the 2 least significant bits to zero
            c = (chunk & 15) << 2 // 15 = 2^4 - 1;
            base64 += encodings[a] + encodings[b] + encodings[c] + '=';
        }
        return "data:audio/mp3;base64," + base64;
	},

    // 读取多媒体文件内容
    multimediaFileReader(file, cb) {
        let reader = new FileReader(); //新建一个FileReader
		//          console.log(JSON.stringify(files[0]) )
		// ReadTxt(files[0].value)
		//     reader.readAsText(files[0], "UTF-8");//读取文件 
		reader.onload = function(evt) { //读取完文件之后会回来这里
			var fileString = evt.target.result; // 读取文件内容
			cb(fileString)
		}
		reader.readAsArrayBuffer(file);
    },

    // 上传图片
    async uploadCourseImg(event, status){
        let self = this;
        // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片   6 --- 课程分享图片   7 --- 作业xml曲谱  8 --- 作业伴奏
        self.courseStatus = status;
        let frequencyDuration = null;
        // // 浏览器兼容 (FF不兼容event.srcElement)
    	// let evt = event.srcElement ? event.srcElement : event.target;
        // // let file = evt.files[0]; // 获取要上传的文件
        // let file = evt.files; // 获取要上传的文件
        // for (let i = 0; i < file.length; i++) {
        //   // 上传多媒体
        //   self.uploadCourseMultimedia(file[i], i)
        // }
        // 浏览器兼容 (FF不兼容event.srcElement)
        let evt = event.srcElement ? event.srcElement : event.target;
        // 获取要上传的文件
        let file = evt.files;
        // 阿里oss上传路径
        let ossPath = '';
        if(self.courseStatus === 0){
            ossPath = 'wx_bs/course/stage/image'
        }
        if(self.courseStatus === 1 || self.courseStatus === 4 || self.courseStatus === 5 || self.courseStatus === 6){
            ossPath = 'wx_bs/course/setion/image'
        }
        if(self.courseStatus === 2){
            ossPath = 'wx_bs/course/setion/audio'
        }
        if(self.courseStatus === 3){
            ossPath = 'wx_bs/course/setion/video'
        }
        if (ossPath) {
            const loading = self.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            for (let i = 0; i < file.length; i++) {
                // 用户取消上传
                if(file[i] == undefined){
                    return;
                }
                // 上传多媒体
                const mainBannerUrl = await upLoadFileToOSS(file[i], ossPath)
                console.log(mainBannerUrl, '选择欲上传的多媒体文件')
                if(self.courseStatus === 0 || self.courseStatus === 5 || self.courseStatus === 6){
                    if(self.courseStatus === 0){
                        // // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                        // self.$refs.imageStage.value = ''
                        // 课程类型banner
                        self.courseStageImg = mainBannerUrl;
                    }
                    if(self.courseStatus === 5){
                        // // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                        // self.$refs.imageCover.value = ''
                        // 课程类型封面
                        self.courseSectionFrom.sectionCover = mainBannerUrl;
                    }
                    if(self.courseStatus === 6){
                        // // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                        // self.$refs.imageShare.value = ''
                        // 课程类型封面
                        self.courseSectionFrom.sectionShare = mainBannerUrl;
                    }
                }else{
                    // console.log(file, index,'....file')
                    // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                    // if (self.courseStatus === 1) {
                    //     self.$refs.imageSection.value = ''
                    // }
                    if (self.courseStatus === 2) {
                        // self.$refs.audioSection.value = ''
                        frequencyDuration = null
                        frequencyDuration = await self.obtainFrequencyDuration((mainBannerUrl))
                        self.courseContentModules.duration = Math.floor(frequencyDuration);
                    }
                    // if (self.courseStatus === 3) {
                    //     self.$refs.videoSection.value = ''
                    // }
                    if (self.courseStatus !== 4) {
                        // self.courseContentModules.name = file.name.split(/\./g).shift();
                        self.courseContentModules.content = mainBannerUrl;
                        self.courseContentModules.play = 0;
                    } else {
                        // self.$refs.imageTask.value = ''
                        console.log('课程作业图片', mainBannerUrl)
                        self.courseContentModules.image.push(mainBannerUrl)
                    }
                    console.log(self.courseContentModules, '...............')
                }
                // console.log(i, file.length, '.............file.length - 1')
                if (i === file.length - 1) {
                    if (self.courseStatus === 0) {
                        self.$refs.imageStage.value = ''
                    }
                    if (self.courseStatus === 1) {
                        self.$refs.imageSection.value = ''
                    }
                    if (self.courseStatus === 2) {
                        self.$refs.audioSection.value = ''
                        frequencyDuration = null
                    }
                    if (self.courseStatus === 3) {
                        self.$refs.videoSection.value = ''
                    }
                    if (self.courseStatus === 4) {
                        self.$refs.imageTask.value = ''
                    }
                    if (self.courseStatus === 5) {
                        self.$refs.imageCover.value = ''
                    }
                    if (self.courseStatus === 6) {
                        self.$refs.imageShare.value = ''
                    }
                    loading.close()
                }
            }
        }
    },

    // 选取 欲加密 文件
    async uploadCourseEncrypt(event, status) {
        let self = this;
        // 课程图片状态    0 --- 课程阶段图片   1 --- 课程内容图片  2 --- 课程内容音频  3 --- 课程内容视屏  4 --- 课程作业图片   5 --- 课程封面图片   6 --- 课程分享图片   7 --- 作业xml曲谱  8 --- 作业伴奏
        self.courseStatus = status;
        // // 浏览器兼容 (FF不兼容event.srcElement)
    	//   let evt = event.srcElement ? event.srcElement : event.target;
        // // let file = evt.files[0]; // 获取要上传的文件
        // let file = evt.files; // 获取要上传的文件
        // for (let i = 0; i < file.length; i++) {
        //   // 加密多媒体文件数据并上传
        //   self.uploadEncryptMultimedia(file[i], i)

        // }
        // 浏览器兼容 (FF不兼容event.srcElement)
        let evt = event.srcElement ? event.srcElement : event.target;
        // 获取要上传的文件
        let file = evt.files;
        // 阿里oss上传路径
        let ossPath = '';
        if(self.courseStatus === 7){
            ossPath = 'wx_bs/course/setion/score'
        }
        if(self.courseStatus === 8){
            ossPath = 'wx_bs/course/setion/accompany'
        }
        if (ossPath) {
            const loading = self.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            for (let i = 0; i < file.length; i++) {
                // 用户取消上传
                if(file[i] == undefined){
                    return;
                }
                // 上传多媒体
                // const mainBannerUrl = await upLoadFileToOSS(file[i], ossPath)
                // console.log(mainBannerUrl, '选择欲上传的多媒体文件')
                const uploadInfo  = await fileUploadAes(file[i], ossPath)
                console.log(uploadInfo, '....uploadInfo')
                if (uploadInfo.status !== 200) {
                    loading.close()
                    return
                }
                if (self.courseStatus === 7) {
                    // 作业 xml曲谱
                    self.courseSectionFrom.sectionScore = uploadInfo.data;
                }
                if (self.courseStatus === 8) {
                    // 作业 伴奏
                    self.courseSectionFrom.sectionAccompany = uploadInfo.data;
                    // 解密云端上的多媒体文件数据
                    self.decodeCloudsMultimedia(self.courseSectionFrom.sectionAccompany)
                }
                if (i === file.length - 1) {
                    if (self.courseStatus === 7) {
                        self.$refs.imageScore.value = ''
                    }
                    if (self.courseStatus === 8) {
                        self.$refs.audioScore.value = ''
                    }
                    loading.close()
                }
            }
        }
    },

      // 获取音频时长
      obtainFrequencyDuration(url){
        let self = this;
        return new Promise((resolve, reject) => {
          // 获取 课程内容音频时长
          self.$refs.Frequency.src = url;
          self.$refs.Frequency.load();
          self.$refs.Frequency.oncanplay =  () => {
            resolve(self.$refs.Frequency.duration)
            console.log(self.$refs.Frequency.duration, 'self.$refs.Frequency.duration')
          }
        })
      },

      // 保存分布
      async operateForm(formName){
        let self = this;
        // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
        if(self.courseOperateStatus === 0){
          if(!self.courseStageImg){
            self.$notify.error({
              title: '错误',
              message: '请上传阶段图片'
            });
            return;
          }
          appendCourseStage(self.typeId, self.courseStageImg)
            .then(res => {
              console.log(res, '... 新增阶段 res')
              if(res.status === 200){
                // 显示编辑弹窗
                self.editVisible = false
                // 获取课程目录数据
                self.obtainCourseCatalogData()
              }else{
                self.$notify.error({
                  title: '错误',
                  message: res.msg
                });
              }
          }).catch(res => {
              console.log(res, '... 新增阶段 err')
          });
        }

        if(self.courseOperateStatus === 1){
          self.$refs[formName].validate((valid) => {
            if (valid) {
              console.log(self.courseContentObject, '...courseContentObject')
              let textFlag = false;
              let mediaFlag = false;
              self.courseContentObject.forEach(function(item, index){
                if(item.status === 0){
                  textFlag = true;
                }
                if(item.status === 1 || item.status === 2 || item.status === 3){
                  mediaFlag = true;
                }
              })
              console.log(textFlag&&mediaFlag, '.......textFlag&&mediaFlag')
              // 课程文本 && (课程 图片 || 视屏 || 音频)
              // if(textFlag&&mediaFlag){
              if(textFlag){
                // courseSectionFrom: {
                //   sectionName: '',
                //   sectionNumber: null,
                //   sectionDay: '',
                // },
                
                appendCourseSection(self.stageId, self.typeId, self.courseSectionFrom.sectionNumber, (self.courseSectionFrom.sectionDay+''), self.courseSectionFrom.sectionName, self.courseSectionFrom.sectionTarget, self.courseSectionFrom.sectionKernel, (self.courseSectionFrom.sectionJob+''), self.courseSectionFrom.sectionCover, self.courseSectionFrom.sectionShare, self.courseSectionFrom.sectionAccompany, self.courseSectionFrom.sectionScore, JSON.stringify(self.courseContentObject))
                  .then(res => {
                    console.log(res, '... 新增小节 res')
                    if(res.status === 200){
                      // 显示编辑弹窗
                      self.editVisible = false
                      // 获取课程目录数据
                      self.obtainCourseCatalogData()
                    }else{
                      self.$notify.error({
                        title: '错误',
                        message: res.msg
                      });
                    }
                }).catch(res => {
                    console.log(res, '... 新增小节 err')
                });
              }else{
                self.$notify.error({
                  title: '错误',
                  message: '课程内容不能为空...'
                });
              }
            } else {
              console.log('表单提交失败!!');
              return false;
            }
          });
        }

        if(self.courseOperateStatus === 2){
          compileCourseStage(self.courseOperateObject.stage_id, self.courseOperateObject.stage_number, self.courseOperateObject.type_id, self.courseStageImg)
            .then(res => {
              console.log(res, '... 编辑阶段 res')
              if(res.status === 200){
                // 显示编辑弹窗
                self.editVisible = false
                // 获取课程目录数据
                self.obtainCourseCatalogData()
              }else{
                self.$notify.error({
                  title: '错误',
                  message: res.msg
                });
              }
          }).catch(res => {
              console.log(res, '... 编辑阶段 err')
          });
        }

        if(self.courseOperateStatus === 3){
          self.$refs[formName].validate((valid) => {
            if (valid) {
              console.log(self.courseContentObject, '...courseContentObject')
              let textFlag = false;
              let mediaFlag = false;
              self.courseContentObject.forEach(function(item, index){
                if(item.status === 0){
                  textFlag = true;
                }
                if(item.status === 1 || item.status === 2 || item.status === 3){
                  mediaFlag = true;
                }
              })
              console.log(textFlag&&mediaFlag, '.......textFlag&&mediaFlag')
              // 课程文本 && (课程 图片 || 视屏 || 音频)
              // if(textFlag&&mediaFlag){
              if(textFlag){
                // section_id,
                // stage_id,
                // type_id,
                // section_number,
                // section_day,
                // section_name,
                // section_content

                compileCourseSection(self.courseOperateObject.section_id, self.courseOperateObject.stage_id, self.courseOperateObject.type_id, self.courseSectionFrom.sectionNumber, (self.courseSectionFrom.sectionDay+''), self.courseSectionFrom.sectionName, self.courseSectionFrom.sectionTarget, self.courseSectionFrom.sectionKernel, (self.courseSectionFrom.sectionJob+''), self.courseSectionFrom.sectionCover, self.courseSectionFrom.sectionShare, self.courseSectionFrom.sectionAccompany, self.courseSectionFrom.sectionScore, JSON.stringify(self.courseContentObject))
                  .then(res => {
                    console.log(res, '... 编辑小节 res')
                    if(res.status === 200){
                      // 显示编辑弹窗
                      self.editVisible = false
                      // 获取课程目录数据
                      self.obtainCourseCatalogData()
                    }else{
                      self.$notify.error({
                        title: '错误',
                        message: res.msg
                      });
                    }
                }).catch(res => {
                    console.log(res, '... 编辑小节 err')
                });
              }else{
                self.$notify.error({
                  title: '错误',
                  message: '课程内容不能为空...'
                });
              }
            } else {
              console.log('表单提交失败!!');
              return false;
            }
          });
        }
      },

      // 确定删除
      async deleteForm(formName){
        let self = this;
        // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节  其他---删除内容
        if(self.courseOperateStatus === 4){
          // deleteCourseSection
          self.$refs[formName].validate((valid) => {
            if (valid) {

            }
          })
        }else if(self.courseOperateStatus === 5){
          self.$refs[formName].validate((valid) => {
            if (valid) {
              console.log(self.courseSectionFrom.userPassword)
              deleteCourseSection(self.courseOperateObject.section_id, self.courseSectionFrom.userPassword)
                .then(res => {
                  console.log(res, '... 删除 res')
                  if(res.status === 200){
                    // 课程目录页面
                    self.courseCatalogPage = 0;
                    // 获取课程目录数据
                    self.obtainCourseCatalogData()
                    // 显示删除弹窗
                    self.delVisible = false;
                  }else{
                    self.$notify.error({
                      title: '错误',
                      message: res.msg
                    });
                  }

              }).catch(res => {
                  console.log(res, '... 删除 err')
              });
            }
          })
        }else{
          // 课程内容对象 courseContentObject
          // 课程内容下标 courseContentIndex
          self.courseContentObject.splice(self.courseContentIndex, 1);
          // 显示删除弹窗
          self.delVisible = false;
        }
      },

      // 初始化 多媒体
      initMedia(){
        let self = this;

      },

      // 检测 多媒体
      monitorMedia(){
        let self = this;
        if(!self.courseContentModules.content){
          // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
          // courseContentStatus: 0,
          // console.log(self.courseContentStatus, '...课程内容状态')
          if(self.courseContentStatus === 0){
            self.$notify.error({
              title: '错误',
              message: '请填写课程文本'
            });
          }
          if(self.courseContentStatus === 1){
            self.$notify.error({
              title: '错误',
              message: '请上传课程图片'
            });
          }
          if(self.courseContentStatus === 2){
            self.$notify.error({
              title: '错误',
              message: '请上传课程音频'
            });
          }
          if(self.courseContentStatus === 3){
            self.$notify.error({
              title: '错误',
              message: '请上传课程视屏'
            });
          }
          if(self.courseContentStatus === 4){
            self.$notify.error({
              title: '错误',
              message: '请填写课程作业'
            });
          }
          if(self.courseContentStatus === 5){
            self.$notify.error({
              title: '错误',
              message: '请选择课程游戏'
            });
          }
          return false;
        }else{
          return true;
        }
      },

      // 确定编辑 多媒体
      operateMedia(){
        let self = this;
        // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
        // courseContentStatus: 0,
        // // 课程内容对象
        // courseContentObject: [],

        // 检测 多媒体
        if(self.monitorMedia()){
          // // 存储欲编辑课程内容模块
          // courseContentModules: {},
          // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
          // courseContentModulesStatus: 0,

          if (self.courseContentStatus === 0 || self.courseContentStatus === 4) {
            // let contentText = self.courseContentModules.content.split('\n')
            // self.courseContentModules.content = []
            // self.courseContentModules.content = contentText

            self.courseContentModules.cache = self.courseContentModules.content.split('\n')

            console.log(self.courseContentModules, '........courseContentModules')
          }

          if(self.courseContentModulesStatus === 0){
            // 课程内容对象
            self.courseContentObject.push(self.courseContentModules)
          }
          if(self.courseContentModulesStatus === 1){
            if (self.courseContentStatus === 5) {
              console.log(self.courseContentModules, '........courseContentModules')
              console.log(self.checkedLevel, '........checkedLevel')
              if (JSON.stringify(self.checkedLevel) !== '[]') {
                self.courseContentModules.cache = self.checkedLevel
                // self.courseContentModules.content = self.checkedLevel
                // 储存 选中的关卡id
                const levelId = []
                // 储存 选中的关卡
                self.checkedLevel.some((itemLevel, indexLevel) => {
                  levelId.push(itemLevel.stripId)
                })
                self.courseContentModules.content = levelId.join()
              }
            }
          }

          // 显示编辑子弹窗
          self.editSubVisible = false;
        }
      },

      // 获取课程目录数据
      async obtainCourseCatalogData(){
        let self = this;
        let courseCatalogData = await obtainCourseCatalogList(self.typeId, self.courseCatalogPage);
        if(JSON.stringify(courseCatalogData) != '{}' && courseCatalogData){
          // 存储课程目录数据
          self.courseCatalogList = courseCatalogData.list;
          // 课程目录标题
          self.courseCatalogTitle = courseCatalogData.title;
          // 课程目录总条数
          self.courseCatalogTotal = courseCatalogData.total;
        }
        console.log(courseCatalogData, '....获取课程分类数据')
      },

      // 小讲堂组件 触发事件
      commentLesson() {
        let self = this;
        console.log('小讲堂组件 触发事件')
        // 显示小讲堂
        self.showLesson = false
      },

      // 选择游戏关卡类型
      optionGameScreeningType(status) {
        let self = this;
        // 游戏关卡类型  0 -- 预备章  1 -- 主线  2 -- 左手  3 -- 乐理  4 -- 右手
        self.gameLevelType = status
        // // 游戏关卡数据 列表
        // self.gameLevelList = []
        // // 获取游戏关卡列表数据
        // self.obtainGameScreeningData()
        console.log(self.gameLevelList[self.gameLevelType], '选择游戏关卡类型')
      },

      // handleCheckAllChange(item) {
      //   let self = this;
      //   console.log(item, 'handleCheckAllChange')
      //   // self.checkedLevel = val ? self.gameLevelList : [];
      //   // self.isIndeterminate = false;
      // },
      handleCheckedLevelChange(item) {
        let self = this;
        console.log(item, 'handleCheckedLevelChange')
        Vue.set(item, 'checked', !item.checked)
        // 储存 选中的关卡id
        console.log(self.checkedLevel, item, '储存 选中的关卡 checkedLevel')
        if (item.checked) {
          self.checkedLevel.push(item)
        } else {
          if (JSON.stringify(self.checkedLevel) !== '[]') {
            self.checkedLevel.some((itemLevel, indexLevel) => {
              if(itemLevel.stripId === item.stripId ) {
                self.checkedLevel.splice(indexLevel, 1);
              }
            })
          }
        }



        // 存储欲编辑课程内容模块
        self.courseContentModules.cache = self.checkedLevel
        // 储存 选中的关卡id
        const levelId = []
        // 储存 选中的关卡
        self.checkedLevel.some((itemLevel, indexLevel) => {
         levelId.push(itemLevel.stripId)
        })
        self.courseContentModules.content = levelId.join()
        console.log(self.courseContentModules, '存储欲编辑课程内容模块')
      },

      // 折叠关卡的变化
      collapseLevelChange(item) {
        let self = this;
        Vue.set(item, 'showed', !item.showed)
      },

      // 获取游戏关卡列表数据
      async obtainGameScreeningData(){
        let self = this;
        const loading = self.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let gameLevelData = await obtainGameScreeningList(self.gameLevelType);
        if(JSON.stringify(gameLevelData) != '{}' && gameLevelData){
          // 游戏关卡数据 列表
          self.gameLevelList = []
          if (gameLevelData.status === 200){
            // 游戏关卡数据 列表
            self.gameLevelList =  gameLevelData.data;
            if (JSON.stringify(self.gameLevelList) !== '[]') {
              console.log(self.checkedLevel, '获取游戏关卡列表数据 checkedLevel')
            }
          }

        }
        console.log(gameLevelData, '....获取游戏关卡列表数据')
        loading.close()
      },

      // 初始化游戏关卡列表数据
      initGameScreeningData(){
        let self = this;
        if (JSON.stringify(self.gameLevelList) !== '[]') {
          // 游戏关卡数据 列表
          self.gameLevelList.some((itemGame, indexGame) => {
            itemGame.some((itemChapter, indexChapter) => {
              Vue.set(itemChapter, 'showed', false)
              itemChapter.noteList.some((itemNote, indexNote) => {
                Vue.set(itemNote, 'showed', false)
                itemNote.noteStripList.some((itemStrip, indexStrip) => {
                  Vue.set(itemStrip, 'checked', false)
                  Vue.set(itemStrip, 'disabled', false)
                })
              })
            })
          })
        }
      },
      // 筛选可选择的游戏关卡列表数据
      filtrateGameScreeningData(){
        let self = this;
        //  将 游戏关卡数据列表中   所对应的课程内容对象 置为不可选
        if (JSON.stringify(self.gameLevelList) !== '[]') {
          // 游戏关卡数据 列表
          self.gameLevelList.some((itemGame, indexGame) => {
            itemGame.some((itemChapter, indexChapter) => {
              itemChapter.noteList.some((itemNote, indexNote) => {
                itemNote.noteStripList.some((itemStrip, indexStrip) => {
                  if (JSON.stringify(self.courseContentObject) !== '[]') {
                    self.courseContentObject.some((itemContent, indexObject) => {
                      // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
                      if (itemContent.status === 5) {
                        itemContent.cache.some((itemCache, indexCache) => {
                          if (itemCache.stripId === itemStrip.stripId) {
                            Vue.set(itemStrip, 'disabled', true)
                          }
                        })
                      }
                    })
                  }
                })
              })
            })
          })
        }


        // 若存在 checkedLevel 则此次操作为编辑   反正为新增
        // 编辑时 筛选出 游戏关卡数据列表中   所对应的课程内容对象 置为 选中 可选 状态
        if (JSON.stringify(self.gameLevelList) !== '[]' && JSON.stringify(self.checkedLevel) !== '[]') {
          self.checkedLevel.some((itemLevel, indexLevel) => {
            // 游戏关卡数据 列表
            self.gameLevelList.some((itemGame, indexGame) => {
              itemGame.some((itemChapter, indexChapter) => {
                itemChapter.noteList.some((itemNote, indexNote) => {
                  itemNote.noteStripList.some((itemStrip, indexStrip) => {
                    if (itemLevel.stripId === itemStrip.stripId && itemLevel.title === itemStrip.title) {
                      console.log(itemStrip, indexStrip, '..........itemStrip, indexStrip')
                      Vue.set(itemChapter, 'showed', true)
                      Vue.set(itemNote, 'showed', true)
                      Vue.set(itemStrip, 'checked', true)
                      Vue.set(itemStrip, 'disabled', false)
                    }
                  })
                })
              })
            })
          })
        }



      }
    },
  }
</script>

<style>
  .courseContentManage .v-modal{
      display: none;
  }
</style>
<style scoped>
  .handle-box {
    margin-bottom: 20px;
    width: 100%;
    text-align: right;
  }
  .del-dialog-cnt{
    font-size: 16px;
    text-align: center
  }

  .pre-img{
    width: 300px;
    height: auto;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
  }
  .crop-demo{
    display: flex;
    align-items: flex-end;
  }
  .crop-demo-btn{
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .crop-input{
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
  .courseContentManage .el-textarea__inner{
    width: 100% !important;
  }
</style>
<style lang="less" scoped>
  @import 'CourseContentManage.less';
</style>
